<template>
  <div class="details">
    <div class="top">
      <img src="../../../assets/common/defaultHead.png" class="img" alt />
      <div class="info">
        <div class="company">
          江苏传值博客教育科技股份有限公司
          <span>体验版</span>
        </div>
        <div class="company-info">管理员 | 传智博客-Python研发部</div>
      </div>
    </div>
    <div class="bottom">
      <div class="todo-item">
        <div class="title">组织总人数</div>
        <countTo :start-val="0" :end-val="total.employeeTotal" :duration="1000" />
      </div>
      <div class="todo-item">
        <div class="title">正式员工</div>
        <div class="totle">{{ total.regularEmployeeTotal }}</div>
      </div>
      <div class="todo-item">
        <div class="title">合同待签署</div>
        <div class="totle">{{ total.contractSignTotal }}</div>
      </div>
      <div class="todo-item">
        <div class="title">待入职</div>
        <div class="totle">{{ total.toBeEmployed }}</div>
      </div>
      <div class="todo-item">
        <div class="title">待转正</div>
        <div class="totle">{{ total.toBeConfirmed }}</div>
      </div>
      <div class="todo-item">
        <div class="title">本月待离职</div>
        <div class="totle">{{ total.toBeDismissed }}</div>
      </div>
      <div class="todo-item">
        <div class="title">接口总访问</div>
        <div class="totle">{{ total.interfaceAccessTotal }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import countTo from 'vue-count-to'
export default {
  name: 'Details',
  components: {
    countTo
  },
  props: {},
  data() {
    return {
      total: {
        contractSignTotal: '', // 合同待签署
        employeeTotal: '', // 组织宗人数
        interfaceAccessTotal: '', // 接口总
        regularEmployeeTotal: '', // 正式员工
        toBeConfirmed: '', // 待转正
        toBeDismissed: '', // 待离职
        toBeEmployed: '' // 待入职
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    show(data) {
      this.total.contractSignTotal = this.updataNumber(data.contractSignTotal)
      this.total.employeeTotal = this.updataNumber(data.employeeTotal)
      this.total.interfaceAccessTotal = this.updataNumber(data.interfaceAccessTotal)
      this.total.regularEmployeeTotal = this.updataNumber(data.regularEmployeeTotal)
      this.total.toBeConfirmed = this.updataNumber(data.toBeConfirmed)
      this.total.toBeDismissed = this.updataNumber(data.toBeDismissed)
      this.total.toBeEmployed = this.updataNumber(data.toBeEmployed)
    },
    updataNumber(num) {
      const arr = (String(num).split('')).reverse()
      // console.log(arr)
      // 计数器
      let count = 0
      const newArr = []
      arr.forEach(el => {
        count++
        if (count % 3 === 0 && count !== arr.length) {
          newArr.push(el)
          newArr.push(',')
        } else {
          newArr.push(el)
        }
      })
      return (newArr).reverse().join('')
    }
  }
}
</script>

<style lang="scss" scoped>
.details {
  padding: 20px;
  background: #fff;
  .top {
    display: flex;
    vertical-align: bottom;
    img {
      width: 48px;
      height: 48px;
    }
    .info {
      margin-left: 10px;
      .company {
        color: #383c4e;
        font-weight: 500;
        font-size: 16px;
        font-family: PingFang SC, PingFang SC-Medium;
        span {
          padding: 2px 8px;
          font-size: 12px;
          background: #f5f6f8;
          text-align: center;
          padding: 2px 8px;
          border-radius: 2px;
          color: #697086;
        }
      }
      .company-info {
        margin-top: 7px;
        font-size: 14px;
        color: #697086;
        font-weight: 400;
      }
    }
  }
  .bottom {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    width: 773px;
    .todo-item {
      padding: 10px;
      width: 140px;
      .title {
        color: #697086;
        font-size: 14px;
        padding: 10px 0;
      }
      .totle {
        color: #383c4e;
        font-size: 30px;
        font-weight: 500;
      }
    }
  }
}
</style>
